<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Selector Invalidation: :has() with nesting parent containing complex selector</title>
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-actions.js"></script>
<script src="../../../resources/testdriver-vendor.js"></script>
<style>
  .anchor { background-color: white; }

  .ancestor .descendant {
    .anchor:has(&) { background-color: blue; }
  }

  .ancestor .child {
    .anchor:has(> &) { background-color: lightblue; }
  }

  .ancestor_prev ~ div .descendant {
    .anchor:has(&) { background-color: yellow; }
  }

  .ancestor_prev ~ div.ancestor .descendant {
    .anchor:has(&) { background-color: yellowgreen; }
  }

  .prev ~ .indirect_next {
    .anchor:has(~ &) { background-color: green; }
  }

  .prev ~ .direct_next {
    .anchor:has(+ &) { background-color: lightgreen; }
  }
</style>
<div><div id="grand_parent1">
  <div id="parent1">
    <div id="anchor1" class="anchor">
      <div><div class="descendant"></div></div>
    </div>
  </div>
</div></div>
<div><div id="grand_parent2">
  <div id="parent2">
    <div id="anchor2" class="anchor">
      <div class="child"></div>
    </div>
  </div>
</div></div>
<div><div id="grand_parent_indirect_prev3"></div>
     <div id="grand_parent_direct_prev3"></div>
     <div id="grand_parent3">
       <div id="parent_indirect_prev3"></div>
       <div id="parent_direct_prev3"></div>
       <div id="parent3">
         <div id="anchor_indirect_prev3"></div>
         <div id="anchor_direct_prev3"></div>
         <div id="anchor3" class="anchor">
           <div><div class="descendant"></div></div>
         </div>
       </div>
</div></div>
<div><div id="indirect_prev4"></div>
     <div id="direct_prev4"></div>
     <div id="anchor4" class="anchor"></div>
     <div></div><div class="indirect_next">
</div></div>
<div><div id="indirect_prev5"></div>
     <div id="direct_prev5"></div>
     <div id="anchor5" class="anchor"></div>
     <div class="direct_next">
</div></div>
<script>
  const white = "rgb(255, 255, 255)";
  const blue = "rgb(0, 0, 255)";
  const lightblue = "rgb(173, 216, 230)";
  const yellow = "rgb(255, 255, 0)";
  const yellowgreen = "rgb(154, 205, 50)";
  const green = "rgb(0, 128, 0)";
  const lightgreen = "rgb(144, 238, 144)";

  function bg_color(element, color, message) {
    promise_test(async () => {
      assert_equals(getComputedStyle(element)['background-color'], color);
    }, message);
  }

  function add_class_and_check_bg_color(
      element_to_add, class_name, has_anchor, color) {
    promise_test(async () => {
      element_to_add.classList.add(class_name);
      assert_equals(getComputedStyle(has_anchor)['background-color'], color);
    }, `#${has_anchor.id} becomes ${color} after adding .${class_name} to #${element_to_add.id}`);
  }

  function remove_class_and_check_bg_color(
      element_to_remove, class_name, has_anchor, color) {
    promise_test(async () => {
      element_to_remove.classList.remove(class_name);
      assert_equals(getComputedStyle(has_anchor)['background-color'], color);
    }, `#${has_anchor.id} becomes ${color} after removing .${class_name} from #${element_to_remove.id}`);
  }

  bg_color(anchor1, white, "#anchor1 initially white");
  add_class_and_check_bg_color(grand_parent1, "ancestor", anchor1, blue);
  remove_class_and_check_bg_color(grand_parent1, "ancestor", anchor1, white);
  add_class_and_check_bg_color(parent1, "ancestor", anchor1, blue);
  remove_class_and_check_bg_color(parent1, "ancestor", anchor1, white);

  bg_color(anchor2, white, "#anchor2 initially white");
  add_class_and_check_bg_color(grand_parent2, "ancestor", anchor2, lightblue);
  remove_class_and_check_bg_color(grand_parent2, "ancestor", anchor2, white);
  add_class_and_check_bg_color(parent2, "ancestor", anchor2, lightblue);
  remove_class_and_check_bg_color(parent2, "ancestor", anchor2, white);

  bg_color(anchor3, white, "#anchor3 initially white");
  add_class_and_check_bg_color(grand_parent_indirect_prev3, "ancestor_prev",
                               anchor3, yellow);
  add_class_and_check_bg_color(grand_parent3, "ancestor", anchor3, yellowgreen);
  remove_class_and_check_bg_color(grand_parent3, "ancestor", anchor3, yellow);
  remove_class_and_check_bg_color(grand_parent_indirect_prev3, "ancestor_prev",
                                  anchor3, white);
  add_class_and_check_bg_color(grand_parent_direct_prev3, "ancestor_prev",
                               anchor3, yellow);
  remove_class_and_check_bg_color(grand_parent_direct_prev3, "ancestor_prev",
                                  anchor3, white);
  add_class_and_check_bg_color(parent_indirect_prev3, "ancestor_prev",
                               anchor3, yellow);
  add_class_and_check_bg_color(parent3, "ancestor", anchor3, yellowgreen);
  remove_class_and_check_bg_color(parent3, "ancestor", anchor3, yellow);
  remove_class_and_check_bg_color(parent_indirect_prev3, "ancestor_prev",
                                  anchor3, white);
  add_class_and_check_bg_color(parent_direct_prev3, "ancestor_prev",
                               anchor3, yellow);
  remove_class_and_check_bg_color(parent_direct_prev3, "ancestor_prev",
                                  anchor3, white);
  add_class_and_check_bg_color(anchor_indirect_prev3, "ancestor_prev",
                               anchor3, yellow);
  remove_class_and_check_bg_color(anchor_indirect_prev3, "ancestor_prev",
                                  anchor3, white);
  add_class_and_check_bg_color(anchor_direct_prev3, "ancestor_prev",
                               anchor3, yellow);
  remove_class_and_check_bg_color(anchor_direct_prev3, "ancestor_prev",
                                  anchor3, white);

  bg_color(anchor4, white, "#anchor4 initially white");
  add_class_and_check_bg_color(indirect_prev4, "prev", anchor4, green);
  remove_class_and_check_bg_color(indirect_prev4, "prev", anchor4, white);
  add_class_and_check_bg_color(direct_prev4, "prev", anchor4, green);
  remove_class_and_check_bg_color(direct_prev4, "prev", anchor4, white);

  bg_color(anchor5, white, "#anchor5 initially white");
  add_class_and_check_bg_color(indirect_prev5, "prev", anchor5, lightgreen);
  remove_class_and_check_bg_color(indirect_prev5, "prev", anchor5, white);
  add_class_and_check_bg_color(direct_prev5, "prev", anchor5, lightgreen);
  remove_class_and_check_bg_color(direct_prev5, "prev", anchor5, white);
</script>